<template>
    <el-form ref="loginForm" :model="loginUser" :rules="loginRules" class="loginForm sign-in-form" label-width="100px">
        <p class="sign-in-title">系统登录</p>
        <div class="sign-in-content">
            <el-form-item label="账号" prop="userName">
                <el-input v-model="loginUser.userName" placeholder="登录账号"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginUser.password" type="password" show-password placeholder="登录密码"
                          @keyup.enter.native="submitLogin"/>
            </el-form-item>
            <el-form-item>
                <el-button class="submit-btn" type="primary" @click="submitLogin">登 录</el-button>
            </el-form-item>
        </div>
        <!-- 找回密码 -->
        <div class="forget-password">
            <p>忘记密码？ <a>立即找回</a></p>
        </div>
    </el-form>
</template>

<script setup>
import {getCurrentInstance} from "vue";
import {loginUser, loginRules} from "@/common/valid/login.ts";
import {useRoute, useRouter} from "vue-router";
import useUser from "@/stores/user";

const {proxy} = getCurrentInstance();//使用proxy代替ctx，因为ctx只在开发环境有效

const router = useRouter()
const route = useRoute()
const userStore = useUser()

//重定向地址
const redirect = route.query && route.query.redirect

// 提交登录
function submitLogin() {
    proxy.$refs['loginForm'].validate((valid) => {
        if (valid) {
            let loginForm = loginUser.value;
            userStore.Login(loginForm).then(() => {
                router.push({path: redirect || "/"});
            }).catch(() => {
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>

<style scoped>
.loginForm {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 5px 10px #cccc;
}

.sign-in-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 20px 20px 50px 20px;
}

.sign-in-content {
    padding-right: 40px;
}

.submit-btn {
    width: 88%;
    margin-top: 50px;
    padding: 18px;
}

.forget-password {
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-size: 12px;
    color: #999;
}

.forget-password p a {
    color: #409eff;
    cursor: pointer;
}
</style>